<template>

	<view class="sharePP">
		<view class="shareP">

			<u-navbar :is-back="true" title="分享好友" :custom-back="BackM" back-text="">
				<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
					<view @click="topModalM" style="padding: 0rem 0.5rem;display: flex;align-items: center;">
						<view style="font-size: 0.75rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;">{{selectClassifyName}}</view>
						<image style="width: 0.7rem;height: 0.5rem;padding: 0.3rem;" src="../../style/image/my/bottomArrow.jpg" alt="">
					</view>
				</view>
			</u-navbar>

			<view v-if="topModal==true" class="top-modal">
				<view class="top-modal-item" @click="selectItemM(item,index)" :style="{ color:selectClassify==index?'#34b887':'' }"
				 v-for="(item,index) in classifyLists " :key="index">{{item.dictType}}</view>
			</view>

			<view>
				<u-tabs-swiper ref="tabs" :list="list" active-color="#4dbf92" inactive-color="" count="count" height="80"
				 :is-scroll="false" :current="current" bar-width="80" gutter="80" @change="tabsChange"></u-tabs-swiper>

			</view>


			<view v-show="current==0" class="bill">
				<view v-if="imageLists.length>0" class="bill-items" v-for="(item,index) in imageLists " :key="index">
					<!-- <view @longpress="logoTimeM(item.dictValue)"  style="padding: 0.5rem;"> -->
					<view @click="logoTimeM(item)" style="padding: 0.5rem;">

						<u-image width="100%" height="13rem" :src="item.dictValue">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</view>

				<u-empty v-else text="暂无文案" mode="data"></u-empty>

			</view>

			<view v-show="current==1">

				<view v-if="officialLists.length>0" class="official" v-for="(item,index) in officialLists " :key="index">
					<view style=" border-bottom: 1px solid #e8e8e8;
						font-size: 0.7rem;
						font-family: PingFang SC;
						font-weight: 300;
						color: #000000;">
						{{item.dictValue}}
					</view>
					<view @click="doCopy" class="official-bottom">
						<view class="official-bottom-text">复制文案</view>
					</view>
				</view>
				<u-empty v-else text="暂无海报" mode="data"></u-empty>

			</view>




			<u-mask :show="showShareModal" @click="show = false" style="text-align: center;">
				<view class="warp" style="margin: 2rem;
						height: 100%;
						width: 16rem;
						display: flex;
						flex-direction: column;
						justify-content: center;">
					<!-- <view>
						<image @click="canleM" style="width: 16rem;height: 20rem;" :src="selectImg" alt="">

							<view style="" class="modal-bottom">
								<view class="modal-bottom-left">
									<u-avatar style="padding:0.1rem" :src="headImg"></u-avatar>
									<view style="margin-left: 0.5rem;">
										<view>{{nickName}}</view>
										<view>推荐码:
											<text>{{recode}}</text>
										</view>
									</view>
								</view> -->
					<!-- <image style="width: 3rem;;height:3rem;" src="../../style/image/share/QR.jpg" alt="">
								<! <view class="qrimg">
									<tki-qrcode ref="qrcode" :val="val" :size="size" background="#000" foreground="#fff" pdground="#fff" :onval="onval"
									 :loadMake="loadMake" :showLoading="showLoading" loadingText="二维码生成中" />
								</view>
							</view>
					</view> -->
					<image @click="canleM" style="width: 16rem;height: 20rem;" :src="shareImg" mode=""></image>
					<view @click="shareWechat" class="threeQ" style="color:white;">
						<view style="text-align: center;" @click="wx">
							<image class="threeQ-image" src="../../style/image/share/weChat.jpg" alt="">
								<view>微信</view>
						</view>

						<view style="text-align: center;" @click="friend">
							<image class="threeQ-image" src="../../style/image/share/weChatRind.jpg" alt="">
								<view>朋友圈</view>
						</view>

						<view @click="saveM" style="text-align: center;">
							<image class="threeQ-image" src="../../style/image/share/local.jpg" alt="">
								<view>保存</view>
						</view>
					</view>
				</view>
			</u-mask>


		</view>
	</view>
</template>

<script lang='ts' scoped>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";
	// import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import {
		findShareDict,
		getTypeBox,
		findShareRole,
		getShareImg
	} from "../../utils/uniApi";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		// components: {
		// 	tkiQrcode
		// }
	})

	export default class extends Vue {
		@Prop({
			// type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		value1 = 2;
		options1 = [{
				label: "默认排序",
				value: 1,
			},
			{
				label: "距离优先",
				value: 2,
			},
			{
				label: "价格优先",
				value: 3,
			},
		];

		classifyLists: any = [
			// {
			//   name: "全部",
			// },
			// {
			//   name: "励志",
			// },
			// {
			//   name: "早安",
			// },
		];

		public headImg: any = "" //头像

		public imgId: any = "" //图片Id

		public shareImg: any = "" //分享图片

		public size: any = 120 //二维码尺寸

		public nickName: any = "" //用户名

		public recode: any = "" //邀请码

		public val: any = `http://cdb.fengzhuan.org/app/registerByH5?oid=2&recCode=${uni.getStorageSync("allData").recCode}`

		public onval: any = true; //vak值变化时自动重新生成二维码

		public loadMake: any = true; //组件加载完成后自动生成二维码

		public showLoading: any = true;

		public type: any = ""; // 励志 早安

		public code = "img"; //img 图片 text 文案

		public dictCode = "";

		public selectImg = "";

		public selectClassify = 0;
		public selectClassifyName = "全部";
		public topModal = false;
		public current = 0;
		public arr: any = []
		public peopleSrc = "";
		public item: any = ''
		public list = [{
				name: `海报`,
				count: 5,
			},
			{
				name: "文案",
				ate_count: 5,
			},
		];

		public imageLists = [
			// {
			//   image: require("../../style/image/share/share1.jpg"),
			// }
		];

		public officialLists = [{
			text: "我们始终坚持一分钱一分货，共享充电宝几百有几千也 有，很多朋友会问它们有什么区别？ 产品质量： 价格低的产品为保障盈利会降低材质要求，甚至故意将 易损的部位质量做低，只为让你长期拿货； 系统稳定性： 贴牌品牌，没有自己的技术研发公司，一旦系统遭受恶 意攻击，代理与客户资金都得不到保障； 没有专业售后： 这种公司只为赚代理设备分润，不在乎代理是否会赚钱 一旦出现售后问题各种推卸责任。 选择好的共享充电宝项目，我推荐咻电。",
		}, ];

		public showShareModal: any = false;
		created() {}
		mounted() {
			uni.showLoading({
				title: "加载中",
			});
			this.recode = uni.getStorageSync("allData").recCode;
			this.nickName = uni.getStorageSync("allData").nickName;
			this.headImg = uni.getStorageSync("allData").headImg;
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			console.log(this.headImg, 'code+++----')

			this.findShareDictM(); //列表数据

			this.getTypeBoxM();
			console.log(uni.getStorageSync("allData").oid, '987654oid')
			// this.findShareRole()
			// console.log(this.selectImg,'tuppppppp')
		}
		doCopy() {
			uni.setClipboardData({
				data: "复制内容",
				success: function() {
					uni.showToast({
						title: "复制成功",
						icon: "none",
						duration: 2000,
					});
				},
			});
		}

		shareWechat() {

			console.log('123')


			// 没有测试手机 
			//  uni.share({
			//                 provider: "weixin",
			//                 scene: "WXSceneSession",
			//                 type: 0,
			//                 href: url,
			//                 title: title,
			//                 summary: "描述",
			//                 imageUrl: imageurl,
			//                 success: function (res) {

			//                     console.log(JSON.stringify(res));
			//                     uni.showToast({
			//                         title: '已分享',
			//                         duration: 2000
			//                     });
			//                 },

			//                 fail: function (err) {

			//                     console.log(err)
			//                 }
			//             });



			//分享到盆友圈

			//     uni.share({
			//     provider: "weixin",
			//     scene: "WXSenceTimeline",
			//     type: 1,
			//     summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			//     success: function (res) {
			//         console.log("success:" + JSON.stringify(res));
			//     },
			//     fail: function (err) {
			//         console.log("fail:" + JSON.stringify(err));
			//     }
			// });


			// onShareTimeline() {
			//         return {
			//                     title: '我的自定义标题',
			//                     query: 'name=xxx&age=xxx',
			//                     imageUrl: 'http://123.png',
			//                 }
			//     }

		}

		saveM(data ? : any) {
			console.log(this.selectImg, "this.selectImgthis.selectImg");
			uni.showLoading({
				title: '下载中'
			});
			uni.downloadFile({
				url: this.shareImg,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {

								uni.hideLoading();

								uni.showToast({
									title: "保存成功",
									icon: "none",
								});
							},
							fail: function() {
								uni.hideLoading();
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none",
								});
							},
						});
					}
				},
			});
		}
		//分享至微信
		wx() {
			// console.log(this.selectImg,'123')
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 2,
				imageUrl: this.shareImg,
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		}
		//分享至朋友圈
		friend() {
			uni.share({
				provider: "weixin",
				scene: "WXSenceTimeline",
				type: 2,
				imageUrl: this.shareImg,
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		}
		getTypeBoxM() {
			let params = {
				userId: uni.getStorageSync("userId") == "" ?
					"" : parseInt(uni.getStorageSync("userId")),
			};
			getTypeBox(params)
				.then((res: any) => {
					console.log(res, "查询类型分组");

					this.classifyLists = res.data.data;

					// dictCode
					if (this.dictCode == "") {
						this.dictCode = res.data.data[0].dictCode;
						console.log(" this.dictCode", this.dictCode);
					} else {}
				})
				.then(() => {
					let oneObj = {
						dictType: `全部`,
					};
					this.classifyLists.unshift(oneObj);

					uni.hideLoading();
				});
		}

		//	分享图片
		ShareImg() {
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				imgId: this.item.id
			}
			getShareImg(params).then((res: any) => {
				this.shareImg = res.data.data
				// this.arr.push(this.shareImg)
				console.log(this.shareImg, '图片分享返回链接')
			})
		}

		findShareDictM() {

			uni.showLoading({
				title: "加载中",
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ?
					"" : parseInt(uni.getStorageSync("userId")),
				code: this.code, //img 图片 text 文案
				type: this.type, //	励志、早安 、、、
				pageNo: 1,
				pageSize: "10",
			};

			findShareDict(params).then((res: any) => {
				console.log("列表数据", res);
				// res.data.data.filter((item: any, index: any) => {
				// 	this.imgId = res.data.data[index].id
				// 	console.log(this.imgId, 'dddiiii')
				// 	this.ShareImg()
				// })
				if (this.code == "img") {
					// alert('img')
					this.imageLists = res.data.data;
					uni.hideLoading();
				} else {
					this.officialLists = res.data.data;
					setTimeout(() => {
						uni.hideLoading();
					}, 100);
				}
			});
		}

		tabsChange(index: any) {
			//    document.body.scrollTop = document.documentElement.scrollTop = 0;
			console.log(index);
			this.current = index;

			if (index == 0) {
				this.code = "img";
			} else {
				this.code = "text";
			}

			this.findShareDictM();

			// this.swiperCurrent = index;
		}

		topModalM() {
			console.log("1231231231");
			// this.topModal=true

			if (this.topModal == true) {
				this.topModal = false;
			} else if (this.topModal == false) {
				this.topModal = true;
			}
		}

		selectItemM(data: any, index: number) {
			console.log(data.dictType, index);

			this.selectClassifyName = data.dictType

			this.type = data.dictType == '全部' ? '' : data.dictType;

			// if (index == 0) {
			//   this.type = "全部";
			// } else if (index == 1) {
			//   this.type = "励志";
			// } else if (index == 2) {
			//   this.type = "早安";
			// }

			if (this.topModal == true) {
				this.topModal = false;
			} else if (this.topModal == false) {
				this.topModal = true;
			}

			// console.log(index, "index", this.type);

			this.findShareDictM();
		}

		logoTimeM(src: any) {
			this.item = src
			console.log("changan");
			//查询是否拥有分享权限
			console.log(this.item.id, 'cdsds');
			this.ShareImg()
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				oid: uni.getStorageSync("allData").oid
			};
			findShareRole(params).then((res: any) => {
				console.log(res, "查询是否拥有分享权限")
				if (res.data.code == 200) {
					console.log(res)
					this.selectImg = src;
					this.showShareModal = true;
				} else {
					uni.showModal({
						title: '提示',
						content: res.data.message,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			})

			// this.selectImg = src;
			// this.showShareModal = true;
		}

		canleM() {
			console.log(12312);
			this.showShareModal = false;

		}

		BackM() {
			uni.switchTab({
				url: "../home/home",
			});
		}
	}
</script>

<style lang="scss" scoped>
	.sharePP {
		height: 100vh;
		background-color: #f2f2f2;
	}

	>>>.u-mode-center-box {
		min-width: 55px;
		min-height: 55px;
		display: block;
		position: relative;
		background-color: rgba(0, 0, 0, 0);
	}

	.bill {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.bill-items {
		width: 50%;
	}

	.shareP {
		background-color: #f2f2f2;
	}

	.official {
		background-color: white;
		margin-bottom: 1rem;
		padding: 0rem 0.5rem;
	}

	.official-bottom {
		padding: 0.5rem 0rem;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.official-bottom-text {
		background: #ffffff;
		border: 1px solid #02af74;
		border-radius: 0.2rem;
		width: 4rem;
		text-align: center;
		padding: 0.1rem;
		font-size: 0.7rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #02af74;
	}

	.shareModal {
		background: rgba(0, 0, 0, 0.2);
		height: 100vh;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.modal-bottom-left {
		display: flex;
	}

	.modal-bottom {
		background-color: white;
		margin-top: -3px;
		padding: 0.3rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.threeQ {
		display: flex;
		justify-content: space-between;
		padding: 1rem;
	}

	.threeQ-image {
		width: 2.5rem;
		height: 2.5rem;
	}

	.top-modal {
		position: absolute;
		background-color: white;
		box-shadow: 0rem 5px 5px #999;
		width: 6rem;
		border-radius: 5px;
		right: 1rem;
		text-align: center;
		z-index: 9;
	}

	.top-modal-item {
		padding: 0.5rem;
	}
</style>
